import React, { useEffect, useState } from 'react';
import styles from './index.less';
import request from 'umi-request';
import wangluo from '../../../../assets/wangluo.png';
import { Popover } from 'antd';

const data = [
  {
    title: '区块高度',
    imagePath: require('../../../../assets/titleicon/chain01.png'),
    name: 'blockNumber',
  },
  {
    title: '交易总数',
    imagePath: require('../../../../assets/titleicon/chain02.png'),
    name: 'totalTxNum',
  },
  {
    title: '近7天交易总数',
    imagePath: require('../../../../assets/titleicon/chain03.png'),
    name: 'txLastWeek',
  },
  {
    title: '健康/节点总数',
    imagePath: require('../../../../assets/titleicon/chain04.png'),
    name: 'healthyNodeNum',
    totalNodeNum: 'totalNodeNum',
  },
  {
    title: '合约总数',
    imagePath: require('../../../../assets/titleicon/chain05.png'),
    name: 'contractNum',
  },
  {
    title: '交易TPS',
    imagePath: require('../../../../assets/titleicon/chain06.png'),
    name: 'tps',
  },
];

export default function TableData() {
  const [tableData1, setTableData] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await request.get('/api/overview');
      setTableData(
        response.data,
      ); /* 通过调用 setTableData 函数，将返回的数据（response.data）更新到 tableData1 状态中。 */
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div className={styles.tableWrapper}>
      <div className={styles.zonglan}>
        <img src={wangluo} className={styles.wangluoIcon}></img>
        <span className="overstriking">实时总数</span>
      </div>
      <div>
        <div className={styles.gezi}>
          {data.map((item, index) => (
            <div className={styles.dataBox1} key={item.name}>
              <img src={item.imagePath} alt={[item.title]} />
              <div className={styles.dataBox2}>
                <div className={styles.contentTitle}>{[item.title]}</div>
                <div className={styles.fourBox}><div className={styles.num}>  {index === 3 ? (`${tableData1?.[item?.name] || '-'}/${tableData1?.[item?.totalNodeNum] || '-'}`) : tableData1?.[item?.name] /* || '-' */}</div>
                  {index === 3 && (
                    /* 悬停弹窗 */
                    <Popover
                      content={
                        <div className={styles.taiBox1}>
                          <div className={styles.taiBox2}>
                            <span className={styles.span1}>节点名称</span>
                            <span>健康状态</span>
                          </div>
                          <div className={styles.taiBox3}>
                            <span className={styles.span2}>VPO<span className={styles.jieDian}>(VP节点)</span></span>
                            <span>
                              {/* 小绿点 */}
                              <svg t="1691927402714" className={styles.greenIcon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8254" width="10" height="10">
                                <path d="M907.707733 422.434133a454.656 454.656 0 0 1-102.4 281.6c-65.706667 84.2752-281.6 256-281.6 256s-215.790933-171.7248-281.6-256a454.656 454.656 0 0 1-102.4-281.6 384 384 0 1 1 768 0z" fill="#FFFFFF" p-id="8255"></path>
                                <path d="M190.907733 422.434133a332.8 332.8 0 1 0 332.8-332.8 333.9264 333.9264 0 0 0-332.8 332.8z" fill="#37D877" p-id="8256"></path>
                              </svg>
                            </span>
                            <span>健康</span>
                          </div>
                        </div>}
                      placement="right">

                      <div className={styles.details}>详情</div>
                    </Popover>
                  )}</div>

              </div>
            </div>
          ))}
        </div>

      </div>
    </div>
  );
}
